<template>
  <div class="dashboard-center">
    <baidu-map class="bm-view" :zoom="12" :center="{lng: 120.761222, lat: 31.661014}" :scroll-wheel-zoom="true">
    </baidu-map>
    <div class="dv-scroll-board-container">
      <h2>周边500m 范围内商铺数量统计</h2>
      <dv-scroll-ranking-board :config="config" style="width:800px;height:400px" />
    </div>
  </div>
  
</template>

<script setup>
import { onMounted, ref } from 'vue'

const config = {
  data: [
    { name: '奶茶店', value: 10 },
    { name: '咖啡店', value: 8 },
    { name: '炸鸡店', value: 5 },
    { name: '快餐店', value: 6 },
    { name: '超市', value: 4 },
    { name: '蛋糕店', value: 3 },
    { name: '宠物店', value: 1 },
    { name: '4s店', value: 2 },
    { name: '手机店', value: 5 }
  ],
  rowNum: 5,
  waitTime: 2000,
  carousel: 'single',
  unit: '',
  sort: true,
  valueFormatter: undefined
}
</script>

<style scoped>
h2 {
  text-align: center;
  color: white;
}
.dashboard-center {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.bm-view {
  width: 100%;
  height: 400px;
}
.dv-scroll-board-container {
  width: 100%;
  height: 240px;
  padding: 5px;
  margin-bottom: 20px;
}
</style>
